<html>
<body>
<h1>hello word!!!</h1>
<p>this is a html page</p>
<input type="file" name="file" id="fileInput">

<script>

    document.getElementById('fileInput').addEventListener('change', function (event) {
        const files = event.target.files;
        console.log(files); // 打印选中的文件列表
        for (let i = 0; i < files.length; i++) {
            uploadFile(files[i])
        }
    });


    // 示例代码 - 使用原生JavaScript实现分片上传
    async function uploadFile(file) {
        const chunkSize = 5 * 1024 * 1024; // 每个分片5MB
        const totalChunks = Math.ceil(file.size / chunkSize);

        for (let chunkNumber = 0; chunkNumber < totalChunks; chunkNumber++) {
            const start = chunkNumber * chunkSize;
            const end = Math.min(start + chunkSize, file.size);
            const chunk = file.slice(start, end);

            const formData = new FormData();
            formData.append('file', chunk);
            formData.append('chunkNumber', chunkNumber);
            formData.append('totalChunks', totalChunks);
            formData.append('identifier', file.name + '-' + file.size);
            formData.append('filename', file.name);

            try {
                await fetch('/upload', {
                    method: 'POST',
                    body: formData
                });
                console.log(`上传分片 ${chunkNumber + 1}/${totalChunks} 成功`);
            } catch (error) {
                console.error(`上传分片 ${chunkNumber + 1} 失败`, error);
                throw error;
            }
        }

        // 所有分片上传完成后，通知服务器合并
        await fetch('/merge', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                filename: file.name,
                identifier: file.name + '-' + file.size,
                totalChunks: totalChunks
            })
        });

        console.log('文件上传并合并完成');
    }


</script>

</body>
</html>